<template>
  <div class="custom-table-list-wrapper">
    <div class="search" :class="{ active: toggleSearchStatus }">
      <div class="search-left" ref="searchFromRef">
        <el-form class="search-form" inline>
          <el-form-item label="所属部门">
            <el-select
              class="search-select"
              v-model="searchParams.department"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="(item, index) of departmentOptions"
                :key="index"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="巡检路线状态">
            <el-select
              class="search-select"
              v-model="searchParams.status"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="(item, index) of statusOptions"
                :key="index"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="关键词">
            <el-input
              class="search-input"
              v-model="searchParams.keywords"
              placeholder="请输入巡检路线名称、编号"
              :suffix-icon="Search"
              clearable
            ></el-input>
          </el-form-item>
        </el-form>
        <a
          class="search-left-toggle"
          v-if="showToggle"
          @click="handleToggleSearch"
        >
          <svg-icon :name="toggleSearchStatus ? 'up' : 'down'" />
          {{ toggleSearchStatus ? '收起' : '展开' }}
        </a>
      </div>
      <div class="search-right">
        <el-button type="primary" @click="initTableList(1)"
          ><svg-icon name="search" size="14px" />搜索</el-button
        >
        <el-button @click="handleReset()"
          ><svg-icon name="reset" size="17px" />重置</el-button
        >
      </div>
    </div>
    <div class="content">
      <div class="content-operate">
        <el-button
          type="primary"
          @click="handleAdd('routeManageEdit', {}, true)"
          ><svg-icon name="add" size="15px" />新增路线</el-button
        >
      </div>
      <div class="content-table">
        <el-table class="custom-table" :data="tableData">
          <el-table-column type="index" label="序号" width="60px" />
          <el-table-column prop="code" label="巡检路线编号" />
          <el-table-column prop="name" label="巡检路线名称" />
          <el-table-column prop="person" label="负责人" />
          <el-table-column prop="telphone" label="联系电话" />
          <el-table-column prop="department" label="所属部门" />
          <el-table-column prop="status" label="巡检路线状态">
            <template #default="scope">
              <el-switch
                :active-value="1"
                :inactive-value="0"
                inline-prompt
                active-text="生效"
                inactive-text="作废"
                v-model="scope.row.status"
                @change="handleChangeStatus(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="160px">
            <template #default="scope">
              <el-button
                link
                type="primary"
                @click="handleDetail(scope.row, 'routeManageDetail', true)"
                >详情</el-button
              >
              <el-button
                link
                type="primary"
                @click="handleEdit(scope.row, 'routeManageEdit', true)"
                >编辑</el-button
              >
              <el-button link type="danger" @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="content-page">
        <el-pagination
          class="custom-pagination"
          :current-page="paginationParams.pageIndex"
          :page-size="paginationParams.pageSize"
          background
          :page-sizes="[10, 20, 30, 50]"
          layout="total, prev, pager, next, sizes, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="initTableList"
        />
      </div>
    </div>
    <!-- <AddDialog ref="addRef" :detail="currentDetail" @close="handleClose" />
    <DetailDialog
      ref="detailRef"
      :detail="currentDetail"
      @close="handleClose"
    /> -->
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { useTableList } from '@/hooks/useTableList'
// import AddDialog from './add.vue'
// import DetailDialog from './detail.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const searchParams = ref({
  department: '',
  status: '',
  keywords: '',
})
const departmentOptions = ref([])
const statusOptions = ref([])
const initOptions = () => {
  departmentOptions.value = [
    {
      name: '安保部',
      value: '安保部',
    },
    {
      name: '技术部',
      value: '技术部',
    },
  ]
  statusOptions.value = [
    {
      name: '作废',
      value: '作废',
    },
    {
      name: '生效',
      value: '生效',
    },
  ]
}
const {
  Search,
  toggleSearchStatus,
  showToggle,
  handleToggleSearch,
  tableData,
  paginationParams,
  total,
  initTableList,
  handleSizeChange,
  handleReset,
  handleDelete,
  addRef,
  detailRef,
  currentDetail,
  handleAdd,
  handleEdit,
  handleDetail,
  handleClose,
  searchFromRef,
} = useTableList(searchParams)

const handleChangeStatus = (val) => {
  ElMessage.success('状态修改成功')
}

onMounted(() => {
  initOptions()
  tableData.value = [
    {
      id: 'aaa',
      name: '巡检路线10',
      person: '李伟',
      code: 'DT1234567',
      telphone: '15942376759',
      department: '安保部',
      status: 1,
    },
    {
      id: 'aaa',
      name: '巡检路线10',
      person: '李伟',
      code: 'DT1234567',
      telphone: '15942376759',
      department: '安保部',
      status: 1,
    },
    {
      id: 'aaa',
      name: '巡检路线10',
      person: '李伟',
      code: 'DT1234567',
      telphone: '15942376759',
      department: '安保部',
      status: 1,
    },
    {
      id: 'aaa',
      name: '巡检路线10',
      person: '李伟',
      code: 'DT1234567',
      telphone: '15942376759',
      department: '安保部',
      status: 1,
    },
    {
      id: 'aaa',
      name: '巡检路线10',
      person: '李伟',
      code: 'DT1234567',
      telphone: '15942376759',
      department: '安保部',
      status: 1,
    },
    {
      id: 'aaa',
      name: '巡检路线10',
      person: '李伟',
      code: 'DT1234567',
      telphone: '15942376759',
      department: '安保部',
      status: 1,
    },
    {
      id: 'aaa',
      name: '巡检路线10',
      person: '李伟',
      code: 'DT1234567',
      telphone: '15942376759',
      department: '安保部',
      status: 1,
    },
    {
      id: 'aaa',
      name: '巡检路线10',
      person: '李伟',
      code: 'DT1234567',
      telphone: '15942376759',
      department: '安保部',
      status: 1,
    },
    {
      id: 'aaa',
      name: '巡检路线10',
      person: '李伟',
      code: 'DT1234567',
      telphone: '15942376759',
      department: '安保部',
      status: 0,
    },
    {
      id: 'aaa',
      name: '巡检路线10',
      person: '李伟',
      code: 'DT1234567',
      telphone: '15942376759',
      department: '安保部',
      status: 0,
    },
  ]
})
</script>
<style lang="scss" scoped>
@import '@/assets/styles/table.scss';
</style>
